<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
      .box {width: 200px; height: 200px; float: left; margin-left: 10px; }
      img { max-height: 200px; max-width: 200px; }
    </style>
    <script src="https://unpkg.com/pictool/dist/index.js"></script>
  </head>
  <body>

    <div class="box">
      <img src="./assets/image/test.jpg" />
    </div>

    <div  class="box" id="J_Example"></div>

  </body>
  <script>
  (async function(Pictool) {
    const imgSrc = './assets/image/test.jpg';
    const Sandbox = Pictool.browser.Sandbox;
    const sandbox = new Sandbox(imgSrc);

    const base64 = await sandbox.queueProcess([
      {
        process: 'sobel',
        options: {},
      },
      {
        process: 'invert',
        options: {},
      }
    ])

    document.getElementById('J_Example').innerHTML = `<img src="${base64}">`

  })(window.Pictool);
  </script>
</html>